<template>
  <div
    class="comparison-item"
    ref="comparisonRef"
    :class="{ 'comparison-item-full': props.isFullScreen }"
  >
    <DrawingBoard
      :current-mode="props.currentMode"
      ref="drawingBoard"
      :index="props.index"
      :isInheritHeight="true"
      @mouse-down="mouseDown"
      @touch-start="touchStart"
    >
      <template #content>
        <div class="header">
          <span
            >{{
              STATUS_ENUM.find(item => item.id === props.content?.status)?.[
                'name'
              ]
            }}
            ｜
            {{
              props.content?.score || props.content?.student_score || 0
            }}分</span
          >
          <span class="label">
            <label
              v-if="props.content && props.content.question_sign === 1"
              class="excellent"
            ></label>
            <label
              v-if="props.content && props.content.question_sign === 2"
              class="typical"
            ></label>
          </span>
        </div>
        <div class="img-wrapper" ref="wrapperRef">
          <img ref="imgRef" :src="imgList[currentImg - 1]" :style="getStyle" />
        </div>
      </template>
    </DrawingBoard>
    <student-tools
      class="student-tool"
      :content="props.content"
      @change-student="changeStudent"
      :total="filtered.length"
      :index="props.index"
    />
    <img-tools
      class="img-tool"
      :current="currentImg"
      :total="imgList.length"
      :is-full-screen="isFullScreen"
      @rotate="rotateImg"
      @full-screen="fullScreen"
      @change-img="changeImg"
    />
  </div>
</template>
<script setup>
import { ref, reactive, watchEffect, computed, nextTick } from 'vue'
import DrawingBoard from '../components/DrawingBoard.vue'
import ImgTools from '../response/ImgTools.vue'
import StudentTools from '../student-compare/StudentTools.vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const comparisonRef = ref()
const imgStyle = reactive({
  rotate: 0
})
const imgRef = ref(null)
const props = defineProps({
  content: {
    type: Object,
    default: () => {}
  },
  isFullScreen: {
    type: Boolean,
    default: false
  },
  total: {
    type: Number,
    default: 0
  },
  index: {
    type: Number,
    default: 0
  },
  currentMode: {
    type: String,
    default: 'select'
  },
  allStudentList: {
    type: Array,
    default: () => []
  },
  selectedStudent: {
    type: Array,
    default: () => []
  }
})
const imgList = ref([])
const currentImg = ref(1)
const currentStudent = ref(0)
const wrapperRef = ref(null)
const drawingBoard = ref()
const emits = defineEmits([
  'full-screen',
  'change-student',
  'change-index',
  'mouse-down',
  'touch',
  'touch-start'
])
watchEffect(() => {
  if (props.content && props.content.answer_url)
    imgList.value = JSON.parse(props.content.answer_url)
})
const filtered = ref([])
const style = ref(null)

const getStyle = computed(() => {
  if (imgRef.value) {
    const width = imgRef.value.width
    const height = imgRef.value.height
    const wrapperHeight = wrapperRef.value.clientHeight
    const wrapperWidth = wrapperRef.value.clientWidth
    const ratio = width / height
    let renderWidth = ''
    if (width > height) {
      // 旋转90/270
      if (imgStyle.rotate % 180 === 90) {
        renderWidth = wrapperHeight + 'px'
        return `transform: rotate(${imgStyle.rotate}deg); max-width: ${renderWidth};`
      } else {
        return `transform: rotate(${imgStyle.rotate}deg); max-width: 100%;`
      }
    } else {
      // 旋转90/270
      if (imgStyle.rotate % 180 === 90) {
        renderWidth = wrapperWidth * ratio + 'px'
        return `transform: rotate(${imgStyle.rotate}deg); max-width: ${renderWidth};`
      } else {
        renderWidth = wrapperHeight * ratio + 'px'
        return `transform: rotate(${imgStyle.rotate}deg); max-width: 100%;`
      }
    }
  } else {
    return `transform: rotate(${imgStyle.rotate}deg);`
  }
})

const draw = type => {
  drawingBoard.value && drawingBoard.value.draw(type)
}

const revert = type => {
  drawingBoard.value && drawingBoard.value.revert(type)
}

const mouseDown = () => {
  emits('mouse-down', props.index)
}

const touchStart = () => {
  emits('touch-start', props.index)
}

const rotateImg = () => {
  imgStyle.rotate += 90
}

const fullScreen = () => {
  emits('full-screen', props.content)
  nextTick(() => {
    drawingBoard.value && drawingBoard.value.changeCanvasHeight(true)
  })
}

const changeStudent = val => {
  if (val === 'next') {
    currentStudent.value =
      Math.abs(currentStudent.value + 1) % filtered.value.length
  } else {
    currentStudent.value =
      (currentStudent.value - 1 + filtered.value.length) % filtered.value.length
  }
  const param = {
    desc: val,
    index: currentStudent.value,
    prev: props.content,
    content: filtered.value[currentStudent.value]
  }
  emits('change-student', param)
}

const changeImg = page => {
  if (page === 'next') {
    currentImg.value += 1
  } else {
    currentImg.value -= 1
  }
}

// 过滤选择对比的学生
watchEffect(() => {
  // if(props.isFullScreen && drawingBoard.value) {
  //   drawingBoard.value.scale()
  // }
  if (props.isFullScreen || route.path.indexOf('studentResponse') > -1) {
    const selected = props.selectedStudent[0]
    const temp = [...props.allStudentList]
    const i = props.allStudentList.findIndex(
      item1 => item1.student_id === selected.student_id
    )
    temp.splice(i, 1)
    temp.unshift(selected)
    filtered.value = [...temp]
    return
  }
  const selected = props.selectedStudent.map(item => item.student_id)
  filtered.value = props.allStudentList.filter(
    item => !selected.includes(item.student_id)
  )
  const flag = filtered.value.findIndex(
    item => item.student_id === props.content.student_id
  )
  // 切换中
  if (flag > -1) {
    filtered.value.splice(flag, 1, props.content)
  } else {
    // 初始化
    filtered.value.unshift(props.content)
  }
})

defineExpose({
  draw,
  revert
})
</script>
<style lang="less" scoped>
.comparison-item {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .header {
    position: absolute;
    z-index: 999;
    top: 10px;
    left: 10px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    span {
      color: rgba(255, 90, 80, 0.8);
      font-size: 20px;
      font-weight: 700;
    }

    .label {
      label {
        display: inline-block;
        height: 88px;
        width: 88px;
        margin: 0 10px;
      }

      .excellent {
        background: url('@/assets/images/comment/excellent-big.png') no-repeat
          center/cover;
      }

      .typical {
        background: url('@/assets/images/comment/typical-big.png') no-repeat
          center/cover;
      }
    }
  }

  .img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    img {
      max-height: 100%;
      max-height: 100%;
    }
  }

  .img-tool {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }

  .student-tool {
    position: absolute;
    left: 10px;
    bottom: 10px;
  }

  &.comparison-item-full {
    height: 100%;
    background: rgba(217, 217, 217, 0.42);

    .header {
      position: absolute;
    }
  }
}
</style>
